<template>
	<view class="page user">
		<view class="user-info">
			<image src="/static/avatar.png" mode="aspectFit"></image>
			<view class="name">
				德古拉伯爵
			</view>
			<view class="from">
				来自于：{{user.address?(user.address.city || user.address.province || user.address.country):`未知`}}
			</view>
		</view>
		<view class="box">
			<view class="item" @click="openLink()">
				<view class="title">
					<uni-icons type="download" size="24"></uni-icons>
					我的下载
				</view>
				<view class="info">
					{{user.downloadSize}}
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item" @click="openLink()">
				<view class="title">
					<uni-icons type="bars" size="24"></uni-icons>
					我的评分
				</view>
				<view class="info">
					{{user.downloadSize}}
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item" @click="openLink()">
				<view class="title">
					<uni-icons type="chat" size="24"></uni-icons>
					联系客服
				</view>
				<view class="info">
					0
					<uni-icons type="right"></uni-icons>
				</view>
				<button open-type="contact"></button>
			</view>
		</view>
		<view class="box">
			<view class="item" @click="openLink(`/pages/notice/detail?id=653507c6466d417a3718e94b`)">
				<view class="title">
					<uni-icons type="heart" size="24"></uni-icons>
					订阅更新
				</view>
				<view class="info">
					0
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<uni-icons type="notification" size="24"></uni-icons>	
					常见问题
				</view>
				<view class="info">
					0
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from "vue";
	import {GetMyInfo} from "../../api/index.js";
	const user = ref({})
	onMounted(async()=>{
		const res = await GetMyInfo();
		user.value=res.data;
	})
	
	// 打开链接
	const openLink = (url)=>{
		console.log(url)
		if(!url){
			return uni.showToast({
				icon:"error",
				title:"链接错误"
			})
		}
		uni.navigateTo({
			url:url
		})
	}
</script>

<style lang="scss">
.user{
	padding: 0rpx;
	width: 100vw;
	height: calc(100vh - 60px);
	box-sizing: border-box;
	overflow: hidden;
	background: linear-gradient(#c8eddb 10%,#ffffff 90%);
	.user-info{
		padding-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 100rpx;
		image{
			width: 154rpx;
			height: 154rpx;
			border-radius: 50%;
		}
		.name{
			font-size: 34rpx;
			font-weight: bold;
			margin:30rpx auto 14rpx auto;
		}
		.from{
			color: #9c9c9c;
			font-size: 28rpx;
		}
	}
	.box{
		background-color: #fff;
		width: 694rpx;
		margin: 0rpx auto 50rpx auto;
		border: 1rpx solid #eee;
		color:rgba(0,0,0,0.6);
		.item{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid rgba(0,0,0,0.1);
			position: relative;
			width: 100%;
			button{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0rpx;
				top: 0rpx;
				opacity: 0;
			}
			&:nth-last-of-type(1){
				border-bottom: none;
			}
			>view{
				display: flex;
				align-items: center;
				padding:20rpx;
				.uni-icons{
					margin:0rpx 8rpx;
				}
			}
		}
	}
}
</style>
